<template>
	<view class="container">
		<view>
			<u-tabs :activeStyle="{color:'#177A77'}" lineColor="#177A77" :list="list1" @click="clickShelf"></u-tabs>
		</view>
		<view class="shelf-1" v-if="index==0">
			<view class="in-border">
				<u-input :disabled="disabled" placeholder="请输入货架名称" border="bottom" clearable
					v-model="model.goodShelves"  maxlength="20"></u-input>
			</view>
			<view class="in-border">
				<u-input :disabled="disabled" placeholder="请输入内容" type="number" border="bottom" clearable v-model="model.title"
					@input="handleInput" maxlength="20"></u-input>
			</view>
			<view class="buts">
				<u-button  :loading="loading" :custom-style="customStyleBtn1"
					@click="handleWriteData">写入数据</u-button>
			</view>
			<view class="pos" v-if="show">
				<view class="dot">
					<image class="work04" src="/static/work/04.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="shelf-1" v-if="index==1" style="margin-top: 50rpx;">
			<u-button   :loading="loading" :custom-style="customStyleBtn1"
				@click="handleDelete">删除货架</u-button>
			<view class="pos" v-if="show">
				<view class="dot">
					<image class="work04" src="/static/work/04.png" mode=""></image>
				</view>
			</view>
		</view>
	<!-- 	<view v-if="index==1" class="shelf-2">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower"
				refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh">
				<view v-for="(item,index) in 20" :key="index" class="itemsBlock">
					<view class="iB">
						<view>货架名称:西仓库左边货架001</view>
						<view style="color: #999999;">创建时间:2025-03-18 12:16:56</view>
					</view>
					<view class="ids" @click="handleUnbinds(index,item)">解绑</view>
				</view>

			</scroll-view>
		</view> -->

	</view>
</template>

<script>
	import {
		create,
		deleteHardByBoxId
	} from '@/api/store.js'
	import NFC from './NFC.js'
	export default {
		data() {
			return {
				triggered: false, //下拉刷新状态
				scrollTop: 0,
				list1: [{
					name: '创建货架',
				}, {
					name: '删除货架',
				}],
				model: {
					goodShelves: '',
					title: ''
				},
				busDisabled: true,
				disabled: false,
				show: false,
				title: '', //写入的数据
				loading: false, //按钮loading
				customStyleBtn1: {
					width: '690rpx',
					height: '90rpx',
					borderRadius: '45rpx',
					background: "linear-gradient(0deg, #177A77, #4B9C6D)",
					fontSize: '28rpx',
					fontWeight: 400,
					color: '#ffffff',
					border: 'none',
					lineHight: '50rpx !important'
				},
				index: 0,
				list: [1, 2],
				queryParams: {
					pageNo: 1, //页码
					pageSize: 20, //条数
				},
				total: 0,
			}
		},
		onLoad() {
			// nfcCodds
			this.handleCustomEventBind = this.handleCustomEvent.bind(this);
			uni.$on('writeData', this.handleCustomEventBind);
			
			this.handleCustomEventBindread = this.handleCustomEventread.bind(this);
			uni.$on('nfcCodds', this.handleCustomEventBindread);
			NFC.listenNFCStatus()
		},
		methods: {
			// 获取列表数据
			getList() {
				setTimeout(() => {
					this.triggered = false
				}, 500)
			},
			// 删除货架
			handleDelete(){
				setTimeout(()=>{
					this.loading = true
					this.show = true
					this.busDisabled = true
					 NFC.readData();
				},500)
			},
			// 确定写入数据
			handleWriteData() {
				if (this.model.title&&this.model.goodShelves) {
					this.loading = true
					this.disabled = true
					this.show = true
					this.busDisabled = true,
						NFC.writeData(this.model.title);
				} else {
					uni.showToast({
						title: '请输入货架名称和芯片ID',
						icon: 'none'
					})
				}
			},
			// 读取到的数据
			async handleCustomEventread(event){
				let res = await deleteHardByBoxId(event.data)
				this.show = false
				this.loading = false
				uni.showToast({
					title:'删除成功',
					icon:'none'
				})
			},
			// 写入成功执行处理
			async handleCustomEvent() {
					try{
						let data = {
							boxId: this.model.title,
							shelfName: this.model.goodShelves
						}
						let res = await create(data)
						this.model.title = ''
						this.model.goodShelves = ''
						this.loading = false
						this.disabled = false
						this.show = false
						uni.showToast({
							title:'操作成功',
							icon:'none'
						})
					} catch (error){
						this.show = false
						this.loading = false
						this.disabled = false
					}
			},
			handleInput(val) {
				if (val) {
					this.busDisabled = false
				} else {
					this.busDisabled = true
				}
			},
			// TABS货架操作选择
			clickShelf(val) {
				this.index = val.index
			},
			//上拉加载
			lower() {
				if (this.list.length < this.total) {
					this.queryParams.pageNo++
					this.getList()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.queryParams.pageNo = 1
				this.list = []
				this.triggered = true
				this.getList()
			},
			// 解绑货架
			handleUnbinds(index, item) {
				this.type = 1
				uni.showModal({
					title: '提示',
					content: '确认解绑此货架？',
					success:async res => {
						if (res.confirm) {
							let data={
								boxId:item.boxId
							}
							let res = await deleteHardByBoxId(data)
							uni.showToast({
								title:'删除成功',
								icon:'none'
							})
							// 调接口解绑货架同时在列表删除此条信息
							this.list.splice(index, 1);
						}
					}
				})
			}

		},
		onUnload() {

		}
	}
</script>

<style scoped>
	.iB {
		flex: 1;
		height: 90rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	.ids {
		width: 100rpx;
		height: 45rpx;
		display: flex;
		align-items: center;
		background-color: #177A77;
		font-size: 21rpx;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;

	}

	.itemsBlock {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #cccccc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 100rpx);
	}

	.shelf-2 {
		width: 100%;
		height: calc(100vh - 100rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.shelf-1 {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pos {
		width: 100%;
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
	}

	.work04 {
		width: 100rpx;
		height: 100rpx;
		position: relative;
		margin-top: 12%;
		margin-left: 10%;
	}

	.dot {
		width: 70px;
		height: 70px;
		display: block;
		position: absolute;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-top: -150rpx;
		margin-right: 0rpx;
		z-index: 1;
	}

	.dot::after {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -2;
		background-color: #177A77;
		animation: dot-play 4s linear 400ms infinite;
	}

	.dot::before {
		width: 100%;
		height: 100%;
		content: "";
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #DDECEB;
		animation: dot-play 4s linear 200ms infinite;
		animation-delay: 2s;
		/* 延迟 2s */
	}

	@keyframes dot-play {
		from {
			transform: scale(1);
			opacity: .2;
		}

		to {
			transform: scale(4);
			opacity: 0;
		}
	}

	.buts {
		width: 80%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.in-border {
		width: 80%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 25rpx;
		border-radius: 15rpx;
		margin-top: 20rpx;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
	}
</style>